<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 后台管理开发框架</title>
<link href="/favicon.ico" rel="icon">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/asset/layui/css/layui.css" rel="stylesheet" type="text/css" />
<link href="/asset/css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layuiadmin-card-header-auto ">
        <div class="layui-form">
            <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input name="title" class="layui-input" type="text" placeholder="角色名称"/>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input name="alias" class="layui-input" type="text" placeholder="角色标识"/>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input name="content" class="layui-input" type="text" placeholder="备注查询"/>
                </div>
            </div>
            <div class="layui-inline" >
                <!-- // 默认搜索 -->
                <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i class="layui-icon layui-icon-search"></i>搜索</button>
                <!-- // 打开添加页面 -->
                <button class="layui-btn icon-btn" lay-open="" lay-title="添加角色" lay-area="600px" lay-url="#editforms" >
                    <i class="layui-icon layui-icon-add-1"></i>添加
                </button>
            </div>
            </div>
        </div>   
        </div>

        <!-- // 创建数据表实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>        
    </div>
</div>

<!-- // 添加编辑栏目 -->
<script type="text/html" id="editforms" >
<div class="layui-fluid layui-bg-white" >
    <form class="layui-form layui-form-fixed" lay-filter="editforms" >
    <input type="text" name="id" hidden="">
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>父级角色</label>
        <div class="layui-input-block">
            <select name="pid"  lay-verify="required" > <volist name="$group" id="vo" >
                <option value="{$vo.id}">{$vo.title}</option>
                </volist>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>角色名称</label>
        <div class="layui-input-block">
            <input name="title" placeholder="请角色名称" type="text" class="layui-input" lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色标识</label>
        <div class="layui-input-block">
            <input name="alias" placeholder="请角色标识" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色备注</label>
        <div class="layui-input-block">
            <textarea name="content" id="content" cols="30" rows="10" style="min-height: 110px;" placeholder="请输入角色备注" class="layui-textarea" 
            lay-verify="required"></textarea>
        </div>
    </div>

    <div class="layui-footer layui-form-item layui-center"  >
        <button class="layui-btn layui-btn-primary" type="button" pa-event="closePageDialog" >取消</button>
        <button class="layui-btn" lay-add="{:url('/system.admingroup/add')}" lay-edit="{:url('/system.admingroup/edit')}" lay-filter="submitPage"  lay-submit>提交</button>
    </div>
    </form>
</div>
</script>

<!-- // 编辑权限列表 -->
<script type="text/html" id="authForms">
<div class="layui-fluid layui-bg-white" >
    <form action="{:url('/system.admingroup/editrules')}" class="layui-form">
    <div class="layui-authtree"  style="padding-left: 15px"><div id="authTree"></div></div>
    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" pa-event="closePageDialog" >取消</button>
        <button class="layui-btn" lay-filter="submitPage" lay-submit>提交</button>
    </div>
    </form>
</div>
</script>

<!-- // 栏目权限列表 -->
<script type="text/html" id="cateForms">
<div class="layui-fluid layui-bg-white" >
    <form action="{:url('/system.admingroup/editcates')}" class="layui-form">
    <div class="layui-authtree" style="padding-left: 15px"><div id="cateTree"></div></div>
    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" pa-event="closePageDialog" >取消</button>
        <button class="layui-btn" lay-filter="submitPage" lay-submit>提交</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" lay-title="编辑 {{d.title}}" lay-area="500px" lay-url="#editforms"  lay-event="edit" >编辑</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" lay-callback="auth" lay-area="300px" lay-title="访问权限" lay-url="#authForms" lay-offset="8%" lay-event="auth">权限</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" lay-callback="cate" lay-area="300px" lay-title="栏目权限" lay-url="#cateForms" lay-offset="8%" lay-event="cate" >栏目</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" lay-url="{:url('/system.admingroup/del/')}id/{{d.id}}" lay-event="del" >删除</a>
</script>


<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>
<script>
    layui.use(['admin','layer','table','eleTree','form'], function () {
        var jquery = layui.jquery;
        var admin = layui.admin;
        var eleTree = layui.eleTree;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;

        /*
         * 初始化表格
        */
        var isTable = table.render({
            elem: "#lay-tableList"
            ,url: "{:url('/system.admingroup/index')}"
            ,page: true
            ,cols: [[
                {type: 'checkbox', width:45},
                {field: 'id', align: 'center',sort: true,width: 80,  title: 'ID'},
                {field: 'title', align: 'center', title: "名称"},
                {field: 'alias', align: 'center', title: "角色标识"},
                {field: 'content', align: 'center',title: "角色备注"},
                {field: 'createtime', align: 'center',title: "创建时间"},
                {align: 'center', toolbar: '#tableBar',width: 260, title: "操作"},
            ]]
        })


        /*
         * 角色回调函数
         */
        admin.callback.auth = function(clickthis,colletction,config) {

            // 获取表格对象
            var tableThis = colletction.tableThis,checkKeys = [];
            // 勾选默认权限
            if (typeof (tableThis.data.rules) !== undefined && tableThis.data.rules != null) {
                checkKeys = tableThis.data.rules.split(',');
                for(var i in checkKeys) {
                    checkKeys[i] = parseInt(checkKeys[i]);
                }
            }

            // 创建实例
            var tree = eleTree({
                el: '#authTree',
                data: _ajax('get_rulecates_tree'),
                highlightCurrent: true,
                showCheckbox: true,
                showLine: false,
                isDefaultChangePstatus: true,
                defaultPid: 0,
                request: {
                    name: "title",
                },
                defaultCheckedKeys: checkKeys,
            })
           
            // 监听提交
            form.on("submit(submitPage)",function(post){
                // 获取提交地址
                var pageThat = jquery(this), _form = pageThat.parents('form'), 
                rules = [],_pageUrl = _form.attr("action") || pageThat.attr('lay-url');
                pageThat.attr("disabled",true);
                if (typeof(_pageUrl) === 'undefined') {
                    layui.iziToast.error({
                        message: "缺少 url 属性",
                    });
                    return false;
                }
                
                // 遍历节点数据
                var nodes = tree.getChecked(false,true);
                for (var i in nodes) {
                    rules.push(nodes[i].id);
                }

                // 增加角色id
                post.field.id = tableThis.data.id;
                // 增加节点数据
                post.field.rules = rules;

                // 开始POST提交数据
                jquery.post(_pageUrl, 
                    post.field, function(res){
                        if (res.code == 200) {
                            layui.iziToast.success({
                                message: res.msg,
                            });
                            // 更新本地规则
                            rules = rules.join(',');
                            tableThis.update({
                                rules: rules
                            });
                            // 关闭当前窗口
                            layer.close(colletction.index);
                        }else{
                            layui.iziToast.error({
                                message: res.msg,
                            });
                        }
                }, 'json');

                return false;                        
            })
        }

        /**
         * 栏目权限回调函数
        */
        admin.callback.cate = function(clickthis,colletction,config) {

            // 获取表格对象
            var tableThis = colletction.tableThis,checkKeys = [];
            // 勾选默认权限
            if (typeof (tableThis.data.cates) !== undefined && tableThis.data.cates != null) {
                checkKeys = tableThis.data.cates.split(',');
                for(var i in checkKeys) {
                    checkKeys[i] = parseInt(checkKeys[i]);
                }
            }

            // 创建实例
            var tree = eleTree({
                el: '#cateTree',
                data: _ajax('get_rulecates_tree','cates'),
                highlightCurrent: true,
                showCheckbox: true,
                isDefaultChangePstatus: true,
                showLine: false,
                defaultPid: 0,
                request: {
                    name: "title",
                },
                defaultCheckedKeys: checkKeys,
            })

            // 监听提交
            form.on("submit(submitPage)",function(post){
                // 获取提交地址
                var pageThat = jquery(this), _form = pageThat.parents('form'), 
                cates = [],_pageUrl = _form.attr("action") || pageThat.attr('lay-url');
                pageThat.attr("disabled",true);
                if (typeof(_pageUrl) === 'undefined') {
                    layui.iziToast.error({
                        message: "缺少 url 属性",
                    });
                    return false;
                }
                
                // 遍历节点数据
                var nodes = tree.getChecked(false,true);
                for (var i in nodes) {
                    cates.push(nodes[i].id);
                }

                // 增加角色id
                post.field.id = tableThis.data.id;
                // 增加节点数据
                post.field.cates = cates;

                // 开始POST提交数据
                jquery.post(_pageUrl, 
                    post.field, function(res){
                        if (res.code == 200) {
                            layui.iziToast.success({
                                message: res.msg,
                            });
                            // 更新栏目权限
                            cates = cates.join(',');
                            tableThis.update({
                                cates: cates
                            });
                            // 关闭当前窗口
                            layer.close(colletction.index);
                        }else{
                            layui.iziToast.error({
                                message: res.msg,
                            });
                        }
                }, 'json');

                return false;                        
            }) 
        }

        // 同步加载函数
        var _ajax = function (action,type,classd) {
            var func = '{:url("/system.admin/_get_auth_func")}';
            return admin.event.getAjaxData(func,{ 
                action : action,
                type   : type,
                class  : classd
            })
        }

    });

</script>
